<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>话题编辑</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link href="/node_modules/LobsterUIFrame/layuiadmin/layui/css/layui.css" rel="stylesheet" />
    <link href="/node_modules/LobsterUIFrame/layuiadmin/style/admin.css" rel="stylesheet" />
    <link href="/node_modules/LobsterUIFrame/layuiadmin/layui/css/modules/layui-icon-extend/iconfont.css"
        rel="stylesheet" />
    <script src="/node_modules/LobsterUIFrame/layuiadmin/layui/layui.js"></script>
</head>
<style>
    .item_img {
        height: 100px;
    }
</style>

<body>
    <div class="layui-fluid box">
        <div class="layui-form" lay-filter="formdata" style="padding: 0px 0px 0 0;">
            <div class="layui-card">
                <div class="layui-card-body box">
                    <input type="hidden" name="TopicId" value="0" />
                    <input type="hidden" name="LookersCount" value="0" />
                    <input type="hidden" name="DelFlag" value="0" />
                    <div class="layui-form-item active">
                        <label class="layui-form-label"><i style="color:red;">*&ensp; </i>话题名称</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" name="TopicName" />
                        </div>
                    </div>
                    <div class="layui-form-item active">
                        <label class="layui-form-label"><i style="color:red;">*&ensp; </i>话题类型</label>
                        <div class="layui-input-block">
                            <select name="TopicType"></select>
                        </div>
                    </div>
                    <div class="layui-form-item active">
                        <label class="layui-form-label"><i style="color:red;">*&ensp; </i>话题描述</label>
                        <div class="layui-input-block">
                            <textarea name="TopicDesc" style="width:100%;height:200px;"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item active">
                        <label class="layui-form-label">话题图片：</label>
                        <div class="layui-input-block">
                            <div class="layui-upload">
                                <div class="layui-inline">
                                    <button type="button" class="layui-btn" id="btnUpIcon">选择图片</button>
                                </div>
                                <div class="layui-upload-list">
                                    <img class="layui-upload-img item_img" src="../resource/bgImg.jpg" id="ImgUrl">
                                </div>
                                <input type="hidden" name="BackImg" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
<script>
    layui.config({
        base: '/node_modules/LobsterUIFrame/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    });

    layui.define(['index', 'layer', 'form', 'element', 'table', 'laydate', 'upload'], function () {
        var layer = layui.layer;
        var admin = layui.admin;
        var $ = layui.$;
        var form = layui.form;
        var laytpl = layui.laytpl;
        var upload = layui.upload;
        var controller = {
            data: {
                model: {},
                sellistinfo: {},
                topictype: [],
                uploadUrl: '',
                ssotoken: '',
            },
            init: function () {
                var self = this;
                self.data.sellistinfo = parent.sellistinfo;
                self.data.topictype = parent.topictype;
                self.initdata();
                self.initEvent();
                self.getUploadUrl(function () {
                    self.uploadData();
                });
            },
            //获取树结构
            initdata: function () {
                var self = this;
                self.initSelect(self.data.topictype, "TopicType");
                if (self.data.sellistinfo) {
                    // $("[name='TopicName']").attr("disabled", true);
                    if (self.data.sellistinfo.BackImg)
                        $("#ImgUrl").attr("src", self.data.sellistinfo.BackImg);
                } else {
                    $("[name='TopicName']").attr("disabled", false);
                }
                form.val("formdata", JSON.parse(JSON.stringify(self.data.sellistinfo)));

            },
            getbaseurl: function (fun) {
                var url = "/lowcode/APP20211203093514696/name/?view=layui&fun=" + fun;
                return url;
            },
            initSelect: function (data, name) {
                var appendHtml = '';
                data.forEach(a => {
                    appendHtml += "<option value=" + a.Code + ">" + a.Name + "</option>";
                })
                $("[name=" + name + "]").html(appendHtml);

            },
            //页面加载
            initEvent: function () {
                var self = this;
                parent.getResult = function () {
                    self.data.model = form.val("formdata");
                    if (self.data.model.TopicId == 0) {
                        var now = new Date();
                        self.data.model.CreateTime = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate() + " " + now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds();
                    }
                    return self.data.model;
                }
            },
            uploadData: function () {
                var self = this;
                upload.render({
                    type: 'post',
                    elem: "#btnUpIcon",
                    url: "https://xinleapi2.mcloudsoft.cn/app/v1/oss/UploadLargeFile",
                    data: {

                    },
                    headers: {
                        'Authorization': 'Bearer ' + self.data.ssotoken
                    },
                    done: function (res) {
                        console.log(res);
                        if (res.code == 0) {
                            self.data.model.Logo = res.data.url;
                            $('#ImgUrl').attr("src", res.data.url); //图片链接（base64）
                            $("[name='BackImg']").val(res.data.url); //图片链接（base64）
                        }
                    }
                });
            },
            getUploadUrl: function (func) {
                var self = this;
                var url = this.getbaseurl("getUploadUrl");
                admin.req({
                    url: url,  //控制器名称，方法名称
                    data: {},
                    done: function (res) {
                        console.log(res);
                        self.data.uploadUrl = res.data.url;
                        self.data.ssotoken = res.data.ssotoken;
                        if (func) {
                            func();
                        }
                    }
                });
            },
        }
        controller.init();
    });
</script>